<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>在线 OJ 平台</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="#">在线OJ</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="topMenu">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link page-scroll" href="#">注销 <span class="sr-only">(current)</span></a>
            </li>
        </ul>
    </div>
</nav>

<!--hero section-->
<section class="bg-hero">
    <div class="container">
        <div class="row vh-100">
            <div class="col-sm-12 my-auto text-center">
                <h1>在线 OJ</h1>
                <p class="lead text-capitalize my-4">
                    Java的在线 OJ 平台
                </p>
                <a href="https://themewagon.com/themes/free-app-ui-kit-charcoal" class="btn btn-outline-light btn-radius btn-lg">博客系统</a>
            </div>
        </div>
    </div>
</section>

<!--components-->
<section class="my-5 pt-5">
    <div class="container">

        <div class="row mt-4">
            <div class="col-sm-12 pb-4">

        <!-- Jumbotron  -->
        <!-- <div class="row mb-5" id="jumbotron">
            <div class="col-sm-12"> -->
                <h1>题目描述</h1>
                <div class="jumbotron jumbotron-fluid">
                    <div class="container" id="problemDesc">
                        <!-- <h1>Container fluid size jumbotron</h1>
                        <p>Think BIG with a Bootstrap Jumbotron!</p> -->
                    </div>
                </div>

                <br>

                <div class="form-group">
                    <label for="exampleFormControlTextarea1">代码编辑框</label>
                    <div id="editor" style="min-height:400px">
                        <textarea class="form-control" id="codeEditor" style="width: 100%; height: 400px;"></textarea>
                    </div>
                    
                </div>
                <button type="submit" class="btn btn-primary" id="submitCode">提交</button>

                <br>
                <br>
                <br>
                <br>

                <h3>测试结果</h3>
                <div class="jumbotron jumbotron-fluid">
                    <div class="container" id="answer">
                        <!-- <h1>Container fluid size jumbotron</h1>
                        <p>Think BIG with a Bootstrap Jumbotron!</p> -->
                    </div>
                </div>
            </div>
            
        </div>

    </div>
</section>

<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                
                <p class="pt-2 text-muted">
                    &copy; YT摆渡人
                </p>
            </div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<!-- 引入ace.js -->
<script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcss.com/ace/1.2.9/ext-language_tools.js"></script>
</body>

<script>
    // 构造代码编辑框
    let editor = initAce();
    function initAce() {
        // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
        let editor = ace.edit("editor");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        editor.setTheme("ace/theme/twilight");
        editor.session.setMode("ace/mode/java");
        editor.resize();
        document.getElementById('editor').style.fontSize = '17px';
        return editor;
    }

    // 构造结果
    function buildAnswer(data) {
        let answer = document.getElementById('answer');
        answer.innerHTML = null;
        let h4 = document.createElement('h4');
        let pre = document.createElement('pre');
        let p = document.createElement('p');
        if(data.error == 0) {
            // 编译运行正确，输出判断结果
            h4.innerHTML = '编译成功';
            p.innerHTML = data.stdout;
        } else {
            h4.innerHTML = '编译失败';
            p.innerHTML = data.reason;
        }
        pre.appendChild(p);
        answer.appendChild(h4);
        answer.appendChild(pre);
    }


    // 构造页面
    function buildProblemDetail(problem) {
        var problemDesc = document.getElementById('problemDesc');

        var h3 = document.createElement('h3');
        h3.innerHTML = problem.id + "." + problem.title + '-' + problem.level;
        var pre = document.createElement('pre');
        var p = document.createElement('p');
        p.innerHTML = problem.description;
        pre.appendChild(p);
        problemDesc.appendChild(h3);
        problemDesc.appendChild(pre);

        // let codeEditor = document.getElementById('codeEditor');
        // codeEditor.innerHTML = problem.templateCode;
        editor.setValue(problem.templateCode);

        let submitCode = document.getElementById('submitCode');
        submitCode.onclick = function() {
            let newCodeEditor = document.querySelector('#codeEditor');
            //console.log(newCodeEditor.innerHTML);
            let body = {
                id:problem.id,
                code:editor.getValue()
            };
            jQuery.ajax({
                url:'compile',
                method:'POST',
                data:JSON.stringify(body),
                contentType:"application/json",
                success: function(data, status) {
                    buildAnswer(data.data);
                }
            });
        }
    }

    // 通过getProblem来获取题目详情
    // getProblem();
    // function getProblem() {
    // }
    jQuery.ajax({
        url:"problem/getProblem" + location.search,
        method:"GET",
        success: function(data, status) {
            // 获取到数据后，构造页面
            buildProblemDetail(data.data);
        }
    }); 
</script>
</html>
